lf.registerNode('diamond', ({ BaseNode, h }) => {
  class DiamondNode extends BaseNode {
    getShape () {
      const attributes = this.getAttributes();
      const { x, y, r } = attributes;
      const points = [
        [x + r, y].join(','),
        [x, y + r].join(','),
        [x - r, y].join(','),
        [x, y - r].join(','),
        [x + r, y].join(','),
      ].join(' ')
      attributes.points = points;
      return h(
        'polyline',
        { ...attributes }
      )
    }
    getArchorsPosition() {
      const { x, y, r } = this.getAttributes();
      return [
        { x: x + r, y: y },
        { x, y: y + r  },
        { x: x- r, y },
        { x, y: y - r }
      ]
    }
  }

  return {
    customNode: DiamondNode,
    customModel: function ({ x = 0, y = 0, properties }) {
      return {
        type: 'diamond',
        x,
        y,
        r: 40 * properties.size, // 实现基于自定义属性
        fill: 'red'
      }
    }
  }
})


lf.registerNode('user', ({ RectNode, h }) => {
  class UserNode extends RectNode {
    getAttributes () {
      const attributes = super.getAttributes();
      return {
        ...attributes,
        width: 60,
        height: 30,
        strokeWidth: '4px',
      };
    }
    getArchorsPosition() {
      const { x, y, width, height } = this.getAttributes();
      return [
        { x, y: y - height /2 },
        { x: x + width / 2, y: y - height / 2 },
        { x: x + width / 2, y },
        { x: x + width / 2, y: y + height / 2 },
        { x, y: y + height / 2 },
        { x: x - width / 2, y: y + height / 2 },
        { x: x - width / 2, y},
        { x: x - width / 2, y: y - height / 2},
      ]
    }
  }

  return {
    customNode: UserNode,
    customModel: function ({ x = 0, y = 0 }) {
      return {
        type: 'user',
        x,
        y,
        fill: 'red'
      }
    }
  }
})


lf.render({
  nodes: [
    {
      type: 'rect'
    },
    {
      type: 'rect'
    },
    {
      type: 'circle',
      x: 200,
      y: 10,
    },
    {
      type: 'diamond',
      x: 100,
      y: 40,
      properties: {
        size: 1
      }
    },
    {
      type: 'diamond',
      x: 300,
      y: 40,
      properties: {
        size: 2
      }
    },
    {
      type: 'user',
      x: 150,
      y: 180
    }
  ],
});